<template>
  <el-row v-loading="loading" class="mail_doiv">
    <el-col :span="24">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>发送内部邮件</span>
          <!-- 选择接收人 text -->
          <el-form v-model="MailForm1">
            <el-form-item label="接收">
              <el-input v-model="UserFullNameData" :disabled="true" ref="SelFullName">
                <template slot="suffix">
                  <div>
                    <el-button size="mini" type="success" @click="AddUserDialogVisible = true">新增</el-button>
                  </div>
                </template>
              </el-input>
              <!-- 弹出层，添加接收人 -->

              <el-dialog :lock-scroll="false" :modal="false" style="z-index:99999" :visible.sync="AddUserDialogVisible"
                @open="DialogShow">
                <div>
                  <div class="DialogDiv"></div>
                  <div>
                    <!-- <el-button v-show="false" type="success" @click="AdditionalUserClick" icon="el-icon-plus"
                        size="mini">追加接收人
                      </el-button> -->
                    <div style="float:left;padding-left:10px;line-height:30px;padding-top:8px">
                      <h4>指定接收人</h4>
                    </div>
                    <div style="float: right;padding-top:8px">
                      <el-input size="mini" v-model="UserSelect" placeholder="查找...">
                        <el-button slot="append" @click="UserSelectList" icon="el-icon-search" style="width:50px;">
                        </el-button>
                      </el-input>
                    </div>
                  </div>
                  <!-- 用户表格 -->
                  <el-table ref="EditTable" :data="UserData.UserList" @select="CangeCheck" @select-all="CheckALL">
                    <el-table-column type="selection" label="选择" width="50px">
                    </el-table-column>
                    <el-table-column property="DepartmentName" label="部门" width="100px">
                    </el-table-column>
                    <el-table-column property="Address1" label="地址" width="300px"></el-table-column>
                    <el-table-column property="FullName" label="真实姓名" width="120px"></el-table-column>
                    <el-table-column property="UserName" label="用户名" width="120px"></el-table-column>
                    <el-table-column property="RoleName_CHS" label="角色" width="100px"></el-table-column>
                    <el-table-column property="Phone1" label="电话" width="170px"></el-table-column>
                  </el-table>
                  <!-- 分页 -->
                  <div class="foot_page">
                    <el-pagination background layout="prev, pager, next" @current-change="DialogShow(1)"
                      :total="UserData.Count" :current-page.sync="page" :page-size="3">
                    </el-pagination>
                  </div>
                </div>
              </el-dialog>
            </el-form-item>
            <el-form-item label="主题">
              <el-input v-model="MailForm1.Subject">
              </el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <div>
                  <el-form-item label="状态">
                    <el-select placeholder="请选择邮件类型" style="width:100%" v-model="MailForm1.TypeID">
                      <el-option label="一般" value="0"></el-option>
                      <el-option label="重要" value="1"></el-option>
                      <el-option label="紧急" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
              <el-col :span="12">
                <div>
                  <el-form-item label=" 类型">
                    <el-select placeholder="请选择类型" style="width:100%" v-model="MailForm1.StatusID">
                      <el-option label="邮件" value="0"></el-option>
                      <el-option label="公告" value="1"></el-option>
                      <el-option label="通知" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>

            <div id="mail">
            </div>
            <el-form-item>
              <el-button class="Mail_bn" type="primary" @click="onSubmit1">发送</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <el-tab-pane label="发送客户询问邮件">
          <el-form ref="MailForm" v-model="MailForm" label-width="80px">
            <el-form-item label="收件人">
              <el-input v-model="MailForm.Addressee">
              </el-input>
            </el-form-item>
            <el-form-item label="主题">
              <el-input v-model="MailForm.MailboxTitle">
              </el-input>
            </el-form-item>
            <div id="mail1">
            </div>
            <el-form-item>
              <el-button class="Mail_bn" type="primary" @click="onSubmit">发送</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>
<style lang="scss" scoped>
.mail_doiv {
  width: 100%;
  z-index: 0;
}
.Mail_bn {
  width: 200px;
}
</style>
<style>
.el-dialog {
  z-index: 10002;
}
.el-dialog__wrapper {
  z-index: 99999 !important;
}
</style>
<script>
import E from "wangeditor";
var editor = new E('#mail')
var editor1 = new E('#mail1')
export default {
  data () {
    return {
      MailForm: {},
      MailForm1: {
        MailFrom: this.$store.state.UserInfo.pk_User
      },
      loading: false,
      AddUserDialogVisible: false,
      //页数
      page: 1,
      //接收人用户数据
      UserData: {},
      //加载接收人文本框
      UserList: [],//已选接收人集合
      UserSelect: '',
      UserFullNameData: '',

    }
  },
  mounted () {
    editor.create()
    editor1.create()
    if (Object.keys(this.$route.query).length) {
      this.$axios({
        url: '/HrApi/Mail/GetDraftboxInfo',
        method: "POST",
        data: this.$Qs.stringify({
          pk_Mail: this.$route.query["pk_Mail"]
        })
      }).then(res => {
        console.log(res.data.data.MailList.MailTo)
        this.UserFullNameData = res.data.data.MailList.MailTo
        this.MailForm1 = res.data.data.MailList
      })
    }
    //editor.txt.clear()清空编辑器内容
  },
  methods: {

    onSubmit1 () {

      this.loading = true;
      this.$axios({
        url: '/HrApi/Mail/SendMail1',
        method: "POST",
        data: this.$Qs.stringify({
          Mail: JSON.stringify(this.MailForm1),
          EmailContent: editor.txt.html(),
          User: this.UserList.map(n => n.pk_User).toString(),
        })
      }).then(res => {
        console.log(res)
        if (!res.data.code) {
          this.loading = false
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        } else {
          this.$message(res.data.msg)
        }
      })
    },
    onSubmit () {
      this.$axios({
        url: '/HrApi/Mail/SendMail',
        method: "POST",
        data: this.$Qs.stringify({
          Addressee: this.MailForm.Addressee,
          MailboxTitle: this.MailForm.MailboxTitle,
          EmailContent: editor1.txt.html()
        })
      }).then(res => {
        console.log(res)
        if (!res.data.code) {
          this.$message({
            message: res.data.msg,
            type: 'success'
          });
        } else {
          this.$message(res.data.msg)
        }
      })
    },
    cg1 () {

    },
    //查询接收人
    UserListData () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 5,
        }
      }).then(res => {
        this.UserData = res.data.data;

      })
    },
    //根据姓名查找数据
    UserSelectList () {
      if (this.UserSelect.length != 0) {
        this.page = 1;
        this.$axios({
          url: '/HrApi/TaskMange/UserSelectList',
          method: 'GET',
          params: {
            page: this.page,
            limit: 5,
            UserSelect: this.UserSelect
          }
        }).then(res => {
          this.UserData = res.data.data;
        })
      }
      else {
        this.UserListData();
      }
    },
    CheckALL (val) {
      if (val.length) {
        val.forEach(r => {
          if (this.UserList.map(n => n.pk_User).indexOf(r.pk_User) === -1) {
            this.UserList.push(r)
          }
        })
      } else {
        this.UserList = []
      }


      //选中后给input重新赋值
      this.$refs.SelFullName.$el.childNodes[1].value = this.UserList.map(n => n.FullName)
    },
    CangeCheck (val, r) {
      if (this.UserList.map(n => n.pk_User).indexOf(r.pk_User) != -1) {
        this.UserList.splice(this.UserList.indexOf(r), 1)
      } else {
        this.UserList.push(r)
      }
      //选中后给input重新赋值
      this.$refs.SelFullName.$el.childNodes[1].value = this.UserList.map(n => n.FullName)
    },
    //追加接收人
    AdditionalUserClick () {
      this.UserFullNameData = ""
      this.UserFullNameData += this.UserList.map(n => n.FullName).toString();
      //this.SelList = this.UserList.map(n => +n.pk_User)
      this.AddUserDialogVisible = false;
    },
    //弹窗显示、隐藏
    DialogShow () {
      this.$axios({
        url: '/HrApi/TaskMange/UserList',
        method: 'GET',
        params: {
          page: this.page,
          limit: 3,
        }
      }).then(res => {
        this.UserData = res.data.data;
        //判断是否已经有选择收件人
        if (this.UserList.length) {
          //进行绑定
          let SelFullName = this.UserList.map(n => n.pk_User).toString();
          this.$nextTick(() => {
            this.UserData.UserList.forEach(item => {
              if (SelFullName.indexOf(item.pk_User) != -1) {
                this.$refs.EditTable.toggleRowSelection(item, true)
              }
            })
          })
        }
      })
    }

  }
}
</script>